<template>
	<view class="container">
		<view class="greet">
			<view class="hello">HELLO! 欢迎登录</view>
			<view class="poyu">数字孪生泊于水库系统</view>
		</view>
		<view class="loginBox">
			<view class="formBox">
				<view class="formInp">
					<uni-easyinput v-model="username" :styles="styles" placeholder="请输入帐号" :clearable="false" :inputBorder="false" placeholderStyle="color: #c7c7c7" />
				</view>
				<view class="formInp">
					<uni-easyinput v-model="password" :styles="styles" type="password" placeholder="请输入密码" :clearable="false" :inputBorder="false" placeholderStyle="color: #c7c7c7" />
				</view>
			</view>
			<view class="forget">
        <text @click="forget">忘记密码？</text>
      </view>
			<view class="loginIn" @click="submit">
        <text>立即登录</text>
      </view>
		</view>
	</view>
</template>

<script>
	import { encrypt, decrypt } from "../../utlis/jsencrypt";

	export default {
		data() {
			return {
				username: '',
				password: '',
        styles: {
					color: '#000000',
					// borderColor: '#2979FF'
				},
			}
		},
		onLoad() {
			let username = uni.getStorageSync("username");
			let password = uni.getStorageSync("password");
			if(username) {
				this.username = username
			}
			if(password) {
				this.password = password
			}
		},
		onShow() {
			uni.removeStorageSync('token');
		},
		methods: {
			// 忘记密码
			forget() {

			},
			// 登录
			submit() {
				if(!this.username) {
          uni.showToast({
            title: '请输入帐号',
            icon: 'none',
            duration: 2000
          });
          return
        }
        if(!this.password) {
          uni.showToast({
            title: '请输入密码',
            icon: 'none',
            duration: 2000
          });
          return
        }
        this.$request.login({ username: this.username, password: encrypt(this.password) }).then(res => {
          uni.hideLoading()
          if(res.code == 200) {
            uni.setStorageSync("token", res.data.access_token);
						uni.setStorageSync("username", this.username);
						uni.setStorageSync("password", this.password);
            uni.showToast({
              title: '登录成功',
              duration: 2000
            })
            setTimeout(() => {
              uni.reLaunch({
                url: "../index/index"
              })
            }, 2000)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000
            });
          }
        })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
	}

	.greet {
		padding-top: 150rpx;
		padding-bottom: 300rpx;
		text-align: center;
		background-image: url('../../static/images/img_bg.png');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 100%;

		.hello {
			font-size: 34rpx;
			line-height: 34rpx;
			color: #fff;
		}
		.poyu {
			font-size: 50rpx;
			line-height: 50rpx;
			color: #fff;
			padding-top: 20rpx;
		}
	}

	.loginBox {
		width: 85%;
		margin: 40rpx auto;

    .formBox {
        .formInp {
          margin-bottom: 37.5rpx;

          .uni-easyinput {
            ::v-deep .uni-easyinput__content {
              border: 6rpx solid rgba($color: #f5f5f5, $alpha: .4);
              border-color: rgba($color: #f5f5f5, $alpha: .4) !important;
              background-color: #f5f5f5 !important;
							border-radius: 50rpx;
							// color: #999;

							.uni-easyinput__content-input {
								height: 97rpx;
							}
							.uni-easyinput__placeholder-class {
								font-size: 28rpx;
								color: #999;
							}
            }
          }
        }
    }

    .forget {
        font-size: 25rpx;
        color: #999;
        text-align: right;
        margin-top: 39rpx;
    }

    .loginIn {
        background-image: url('../../static/images/btn_bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
        text-align: center;
        height: 97rpx;
        line-height: 97rpx;
        margin: 60rpx 0 0;
				border-radius: 43rpx;

        text {
          font-size: 33rpx;
					font-weight: 500;
					color: #FAFAFA;
        }
    }
  }
</style>
